<template>
	<view class="auto-table-box">
		<table class="auto-table">
			<thead>
				<tr>
					<th v-for="c in headers" :key="c.key">{{ c.title || c.lable }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(x, i) in value" :key="i">
					<td v-for="c in headers" :key="c.key">
						<template v-if="c.type === 'index'">
							{{ i + 1 }}
						</template>
						<slot v-else :name="c.slot" :row="c" :value="x" :index="i">
							<template v-if="x[c.key]">
								{{ x[c.key] }}{{ c.unit }}
							</template>
							<template v-else>
								<Expand :render="c.render" :keys="c" :index="i" :value="x"></Expand>
							</template>
						</slot>
					</td>
				</tr>
			</tbody>
		</table>
	</view>
	
</template>

<script>
import Expand from './expand.js';
export default {
	components: {
		Expand
	},
	props: {
		value: {
			type: Array,
			default() {
				return [];
			}
		},
		headers: {
			type: Array,
			default() {
				return [];
			}
		},
		showBottomSum: false
	},
	computed: {
		//合计
		total() {
			return this.headers.filter((x, i) => {
				if (!i) {
					x.total = '合计';
					return x;
				}
				x.total = 0;
				this.value.map(h => {
					x.total = Math.round((x.total - 0 || 0) + (h[x.key] - 0 || 0), 6);
				});
				return x;
			});
		}
	}
	/*data() {
		return {
			headers: [
				{
					title: '姓名',
					key: 'name'
				},
				{
					title: '年龄',
					key: 'age'
				},
				{
					title: '学院学院学院学院学院学院学院学院学院学院学院学院学院学院',
					key: 'collage'
				},
				{
					title: '成绩',
					key: 'score'
				},
				{
					title: '路由',
					key: 'url'
				},
				{
					title: '网址',
					key: 'link'
				}
			],
			value: [
				{
					name: '刘一',
					age: '',
					collage: '信息学院',
					score: '99'
				},
				{
					name: '陈二',
					age: '18',
					collage: '商学院',
					score: '98'
				},
				{
					name: '张三',
					age: '22',
					collage: '统计与数学学院',
					score: '97'
				},
				{
					name: '李四',
					age: '19',
					collage: '城市与环境学院',
					score: '96'
				},
				{
					name: '王五',
					age: '20',
					collage: '旅游与酒店管理学院',
					score: '95'
				},
				{
					name: '赵六 ',
					age: '20',
					collage: '',
					score: '88'
				},
				{
					name: '孙七',
					age: '21',
					collage: '',
					score: '95'
				},
				{
					name: '周八 ',
					age: '21',
					collage: '会计学院',
					score: '85'
				},
				{
					name: '吴九 ',
					age: '20',
					collage: '',
					score: '91'
				},
				{
					name: '郑十',
					age: '19',
					collage: '',
					score: '95'
				}
			]
		};
	}*/
};
</script>

<style lang="scss">
$borderColor: rgba(0, 0, 0, 0.1);
.auto-table-box{
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
	border: 1px solid red;
}
.auto-table {
	/*设置相邻单元格的边框间的距离*/
	border-spacing: 0;
	/*表格设置合并边框模型*/
	border-collapse: collapse;
	text-align: center;
	height: 100%;
	overflow: auto;
	width: 100%;
	border: 1px solid $borderColor;
	td,
	th {
		font-size: 12px;
		font-weight: 400;
		padding: 0.5em;
		line-height: 1.3em;
		border-right: 1px solid $borderColor;
		white-space: nowrap;
	}
	th {
		background-color: #eaeef1;
	}
}
</style>
